// 交通状况
'use client'

import React from 'react'
import Styles from '../page.module.scss'

export default function TrafficState() {
  const trafficList = [
    { url: 22, name: '畅通' },
    { url: 18, name: '缓行' },
    { url: 36, name: '拥堵' },
    { url: 36, name: '严重拥堵' },
  ]
  return (
    <div
      className={`absolute top-[24px] right-[15px] w-[400px] h-[74px] text-white flex justify-around items-center ${Styles['common-bg']}`}>
      {trafficList.map(item => (
        <div
          className='flex justify-around items-center'
          key={item.name}>
          <div>图片</div>
          <div className={`${Styles['traffic-text']}`}>{item.name}</div>
        </div>
      ))}
    </div>
  )
}
